<template>
  <div class="goods-video-item-box">
    <img :src="video.imgUrl" alt="">
    <h3 class="video-title">{{ video.title }}</h3>
    <p class="video-desc">{{ video.desc }}</p>
    <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-bofangqi-bofangxiaodianshi"></use>
    </svg>
  </div>
</template>
<script>
import '@/assets/font/play/playButton'

export default {
  name: "GoodsVideoItem",
  props: {
    video: {
      type: Object,
      require: true,
    },
  },
  data() {
    return {}
  },
}
</script>

<style scoped lang="less">
.goods-video-item-box {
  background-color: #ffffff;
  width: 296px;
  height: 285px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: space-around;
  align-items: center;
  transition: all .3s linear;
  position: relative;
  
  &:hover {
    transform: translateY(-3px);
    box-shadow: 5px 5px 20px #ccc;
    
    .icon {
      color: #ff6700;
    }
  }
  
  .video-title {
    font-size: 14px;
    color: #333333;
  }
  
  .video-desc {
    font-size: 12px;
    color: #b0b0b0;
    
  }
  
  .icon {
    position: absolute;
    left: 30px;
    top: 50%;
    font-size: 2.5em;
    transition: all .3s linear;
  }
}
</style>
